view,
scroll-view,
swiper,
match-media,
movable-area,
movable-view,
cover-view,
cover-image,
icon,
text,
rich-text,
progress,
button,
checkboxe,
ditor,
form,
input,
label,
picker,
picker-view,
radio,
slider,
switch,
textarea,
navigator,
audio,
camera,
image,
video,
live-player,
live-pusher,
map,
canvas,
web-view,
:before,
:after {
	box-sizing: border-box;
}

/* 隐藏scroll-view的滚动条 */
::-webkit-scrollbar {
	display: none;
	width: 0 !important;
	height: 0 !important;
	-webkit-appearance: none;
	background: transparent;
}

// 超出省略,最多5行
@for $i from 1 through 5 {
	.text-ellipsis-#{$i} {
		// vue下，单行和多行显示省略号需要单独处理
		@if $i == '1' {
			overflow: hidden;
			white-space: nowrap;
			text-overflow: ellipsis;
		} @else {
			display: -webkit-box !important;
			overflow: hidden;
			text-overflow: ellipsis;
			word-break: break-all;
			-webkit-line-clamp: $i;
			-webkit-box-orient: vertical !important;
		}
	}
}

/** 基础通用 **/
@for $i from 1 through 500 {
	//根据自己的范围定义
	.m-#{$i} {
		margin: #{$i}rpx !important;
	}
	.mx-#{$i} {
		margin: 0 #{$i}rpx !important;
	}
	.my-#{$i} {
		margin: #{$i}rpx 0 !important;
	}
	.mt-#{$i} {
		margin-top: #{$i}rpx !important;
	}
	.mb-#{$i} {
		margin-bottom: #{$i}rpx !important;
	}
	.mr-#{$i} {
		margin-right: #{$i}rpx !important;
	}
	.ml-#{$i} {
		margin-left: #{$i}rpx !important;
	}
	.p-#{$i} {
		padding: #{$i}rpx !important;
	}
	.px-#{$i} {
		padding: 0 #{$i}rpx !important;
	}
	.py-#{$i} {
		padding: #{$i}rpx 0 !important;
	}
	.pt-#{$i} {
		padding-top: #{$i}rpx !important;
	}
	.pb-#{$i} {
		padding-bottom: #{$i}rpx !important;
	}
	.pr-#{$i} {
		padding-right: #{$i}rpx !important;
	}
	.pl-#{$i} {
		padding-left: #{$i}rpx !important;
	}
	.f-#{$i} {
		font-size: #{$i}rpx !important;
	}
}

// 主轴方向 属性值
$directionList: row, row-reverse, column, column-reverse;
// 主轴对齐方式 属性值
$justifyContentList: flex-start, flex-end, center, space-between, space-around;
// 交叉轴对齐方式 属性值
$alignItemsList: flex-start, flex-end, center, baseline, stretch;

// 三层遍历，组合所有属性值
@each $direction in $directionList {
	// 简化一些属性值
	$dir: $direction;
	@if $direction == 'row' {
		$dir: 'x';
	}
	@if $direction == 'column' {
		$dir: 'y';
	}
	@each $justifyContent in $justifyContentList {
		// 简化一些属性值
		$JC: $justifyContent;
		@if $justifyContent == 'flex-start' {
			$JC: 'start';
		}
		@if $justifyContent == 'flex-end' {
			$JC: 'end';
		}
		@if $justifyContent == 'space-between' {
			$JC: 'between';
		}
		@if $justifyContent == 'space-around' {
			$JC: 'around';
		}
		@each $alignItems in $alignItemsList {
			// 简化一些属性值
			$AI: $alignItems;
			@if $alignItems == 'flex-start' {
				$AI: 'start';
			}
			@if $alignItems == 'flex-end' {
				$AI: 'end';
			}

			// 根据变量，组合为css代码
			@if $AI == 'center' {
				.flex-#{$dir}-#{$JC} {
					display: flex;
					flex-direction: $direction;
					justify-content: $justifyContent;
					align-items: center;
				}
			} @else {
				.flex-#{$dir}-#{$JC}-#{$AI} {
					display: flex;
					flex-direction: $direction;
					justify-content: $justifyContent;
					align-items: $alignItems;
				}
			}
		}
	}
}

// _fonts.scss
$base-font-family: 'Arial', sans-serif;
$heading-font-family: 'Georgia', serif;

@mixin font-style($size: 16px, $family: $base-font-family, $weight: normal, $color: #333) {
	font-size: $size;
	font-family: $family;
	font-weight: $weight;
	color: $color;
}

// 使用
// .heading {
//   @include font-style(24px, $heading-font-family, bold);
// }
page {
	background-color: #f2f2f2;
}
